<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img id="light" src="img/off.gif" /> <br />

    <div class="cls">传智教育</div>
    <br />
    <div class="cls">黑马程序员</div>
    <br />

    <input type="checkbox" name="hobby" /> 电影
    <input type="checkbox" name="hobby" /> 旅游
    <input type="checkbox" name="hobby" /> 游戏
    <br />
  </body>
  <script>
    // 案例
    // 1 点亮灯泡
    document.getElementById("light").src = "img/on.gif";

    // 2 将所有的div标签的标签体内容后面加上：very good
    var arr = document.getElementsByClassName("cls");
    for (let i = 0; i < arr.length; i++) {
      const element = arr[i];
      // element.innerHTML = element.innerHTML + "very good";
      element.innerHTML += "<font color='red'> very good </font>";
    }

    // 3 使所有的复选框呈现被选中的状态
    var arr2 = document.getElementsByName("hobby");
    for (let i = 0; i < arr2.length; i++) {
      const element = arr2[i];
      element.checked = true;
    }
  </script>
</html>
